<template>
    <div>
        <div class="comment-item" v-for="(comment,index) in comments" :key="comment.commentId">
            <div class="user-img">
                <img :src="`../imgs/users/${comment.userImg}`">
            </div>
            <div class="user-info">
                <div class="user-name">
                    <span>用户名称</span>
                    <div class="film-source">
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img close"></span>
                        <span class="star-img close"></span>
                        <span class="star-source">{{comment.userSource}}</span>
                    </div>
                </div>
                <div class="user-time">{{comment.createTime}}</div>
            </div>
            <div class="user-conent">
                {{comment.userMsg}}
            </div>
        </div>
    </div>
</template>
<script>
    var filmComments = Vue.extend({
        template: document.currentScript.ownerDocument.querySelector("template"),
        data() {
            return {
                comments: []
            }
        },
        methods: {
            getFilmComment(id) {
                $.ajax({
                    url: "http://localhost/film-project/filmApi/loadComments.php",
                    data: {
                        filmId: id
                    },
                    dataType: "json",
                    success: ({ result }) => {
                        this.comments = result;
                    }
                })
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.getFilmComment(this.$root.filmId);
            })
        }
    })
</script>